<!doctype html>
<html lang="en">
<!-- head 区域 - 开始 -->
<?php
$title='编辑分类';
require_once('head.php');
if($userrow['uid']!=1){exit("<script language='javascript'>window.location.href='login.php';</script>");}
$uid=$_GET['uid'];
?>
<!-- head 区域 - 结束 -->

<body data-topbar="dark" data-layout="horizontal">

  <!-- 页面 - 开始 -->
  <div id="layout-wrapper">

    <!-- 头部区域 - 开始 -->
    <?php include('header.php'); ?>
    <!-- 头部区域 - 结束 -->

    <!-- 顶部导航栏 - 开始 -->
    <?php include('topnav.php'); ?>
    <!-- 顶部导航栏 - 结束 -->

    <!-- 主内容区域 - 开始 -->
    <div class="main-content" id="orderlist">

      <div class="page-content">
        <div class="container-fluid">

          <div class="row mt-4">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-body">
                  <!-- 表头 - 开始 -->
                  <div class="card-button"><button class="btn btn-primary waves-effect waves-light" data-toggle="modal"
                      data-target="#modal-add">添加分类</button></div>
                  <h4 class="card-title">分类列表</h4>
                  <p class="card-title-desc">这里可以看到所有的分类</p>
                  <!-- 表头 - 结束 -->

                  <!-- 表体 - 开始 -->
                  <div class="table-responsive">
                    <table class="table table-hover mb-0">
                      <thead>
                        <tr>
                          <th>ID</th>
                          <th>排序</th>
                          <th>分类名称</th>
                          <th>状态</th>
                          <th>添加时间</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="res in row.data" :key="res.id">
                          <td>{{res.id}}</td>
                          <td>{{res.sort}}</td>
                          <td>{{res.name}}</td>
                          <td><span class="badge badge-success" v-if="res.status==1">已启用</span><span
                              class="badge badge-danger" v-else-if="res.status==0" @click="ktapi(res.uid)">未启用</span>
                          </td>
                          <td>{{res.time}}</td>
                          <td><button class="btn btn-info waves-effect waves-light btn-sm" data-toggle="modal"
                              data-target="#modal-update" @click="upm=res">编辑</button>&nbsp;<button
                              class="btn btn-danger waves-effect waves-light btn-sm" @click="del(res.id)">删除</button></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <!-- 表体 - 结束 -->

                  <!-- 分页 - 开始 -->
                  <div class="row mt-4">
                    <div class="col-lg-12">
                      <div class="card-pagination">
                        <ul class="pagination">
                          <li class="page-item" :class="row.current_page<=1?'disabled':''"><a class="page-link"
                              @click="row.current_page>1?get(row.current_page-1):''">上一页</a></li>
                          <li v-for="(item, index) in row.last_page" :key="index" class="page-item"
                            :class="{'active':item==row.current_page}" @click="get(item)"><a class="page-link">{{ item
                              }}</a></li>
                          <li class="page-item" :class="row.current_page>=row.last_page?'disabled':''"><a
                              class="page-link"
                              @click="row.last_page>row.current_page?get(row.current_page+1):''">下一页</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- 分页 - 结束 -->

                </div>
              </div>
            </div>
          </div>
          <!-- end row -->

        </div> <!-- container-fluid -->
      </div>
      <!-- End Page-content -->

      <!-- 修改弹窗 -->
      <div class="modal fade primary" id="modal-update">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">修改分类</h4>
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"
                  style="font-size: 30px;">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              <form class="form-horizontal" id="form-update">
                <input type="hidden" name="action" value="update" />
                <div class="form-group row">
                  <label class="col-lg-2 col-form-labell">排序</label>
                  <div class="col-lg-10">
                    <input type="text" v-model="upm.sort" class="form-control" :value="upm.sort">
                  </div>
                </div>
                <div class="form-group row row">
                  <label class="col-lg-2 col-form-labell">分类名称</label>
                  <div class="col-lg-10">
                    <input type="text" v-model="upm.name" class="form-control" :value="upm.name">
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-lg-2 col-form-labell">状态</label>
                  <div class="col-lg-10">
                    <select v-model="upm.status" :value="upm.status" class="form-control">
                      <option value="1">启用</option>
                      <option value="0">关闭</option>
                    </select>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal"
                @click="up_m">确定修改</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 新增弹窗 -->
      <div class="modal fade primary" id="modal-add">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">添加分类</h4>
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"
                  style="font-size: 30px;">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              <form class="form-horizontal" id="form-add">
                <input type="hidden" name="action" value="add" />
                <div class="form-group row">
                  <label class="col-lg-2 col-form-labell">排序</label>
                  <div class="col-lg-10">
                    <input type="text" v-model="addm.sort" class="form-control">
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-lg-2 col-form-labell">分类名称</label>
                  <div class="col-lg-10">
                    <input type="text" v-model="addm.name" class="form-control">
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal"
                @click="add_m">确定添加</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部版权区域 - 开始 -->
      <?php include('copyright.php'); ?>
      <!-- 底部版权区域 - 结束 -->

    </div>
    <!-- 主内容区域 - 结束 -->
  </div>
  <!-- 页面 - 结束 -->

  <!-- 底部文件 - 开始 -->
  <?php include('footer.php'); ?>
  <!-- 底部文件 - 结束 -->

  <script type="text/javascript">
    vm = new Vue({
      el: "#orderlist",
      data: {
        row: null,
        uid: "<?php echo $uid ?>",
        storeInfo: {},
        addm: {
          uid: "<?php echo $uid ?>",
        },
        upm: {}
      },
      methods: {
        get: function (page) {
          // var load=layer.load(2);
          SlickLoader.setText('加载中...')
          SlickLoader.enable();
          this.$http.post("/apisub.php?act=fllist", { uid: this.uid }, { emulateJSON: true }).then(function (data) {
            // layer.close(load);
            SlickLoader.disable();
            if (data.data.code == 1) {
              this.row = data.body;
            } else {
              layer.msg(data.data.msg, { icon: 2 });
            }
          });
        }, add_m: function () {
          // var load=layer.load(2);
          SlickLoader.setText('加载中...')
          SlickLoader.enable();
          this.$http.post("/apisub.php?act=fl", { data: this.addm, active: 1 }, { emulateJSON: true }).then(function (data) {
            // layer.close(load);
            SlickLoader.disable();
            if (data.data.code == 1) {
              vm.get(1);
              layer.msg(data.data.msg, { icon: 1 });
              this.addm = {}
            } else {
              layer.msg(data.data.msg, { icon: 2 });
            }
          });
        }, up_m: function () {
          // var load=layer.load(2);
          SlickLoader.setText('加载中...')
          SlickLoader.enable();
          this.$http.post("/apisub.php?act=fl", { data: this.upm, active: 2 }, { emulateJSON: true }).then(function (data) {
            // layer.close(load);
            SlickLoader.disable();
            if (data.data.code == 1) {
              vm.get(1);
              layer.msg(data.data.msg, { icon: 1 });
            } else {
              layer.msg(data.data.msg, { icon: 2 });
            }
          });
        }, del: function (id) {
          // var load=layer.load(2);
          SlickLoader.setText('加载中...')
          SlickLoader.enable();
          this.$http.post("/apisub.php?act=fl_del", { id: id }, { emulateJSON: true }).then(function (data) {
            // layer.close(load);
            SlickLoader.disable();
            if (data.data.code == 1) {
              vm.get(1);
              layer.msg(data.data.msg, { icon: 1 });
            } else {
              layer.msg(data.data.msg, { icon: 2 });
            }
          });
        }
      },
      mounted() {
        this.get(1);
      }
    });
  </script>

</body>

</html>